<template>
	<a-card :bordered="false" :body-style="{ 'padding-bottom': '0px' }" class="mb-2">
		<a-form ref="formRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="统计时间">
						<div style="display: flex; align-items: center">
							<a-form-item style="flex: 1; margin-right: 12px" name="startTimeCreated">
								<a-date-picker
									placeholder="请选择开始日期"
									class="block"
									format="YYYY-MM-DD"
									v-model:value="searchFormState.startTimeCreated"
									allow-clear
								/>
							</a-form-item>
							<a-form-item style="flex: 1" name="endTimeCreated">
								<a-date-picker
									placeholder="请选择结束日期"
									class="block"
									format="YYYY-MM-DD"
									v-model:value="searchFormState.endTimeCreated"
									allow-clear
								/>
							</a-form-item>
						</div>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="选择店铺">
						<a-select v-model:value="searchFormState.storeCode" :options="storeOptions" allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" html-type="submit" @click="table.refresh()">查询</a-button>
					<a-button style="margin: 0 8px" @click="() => formRef.resetFields()">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-card :bordered="false" title="基础信息">
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:scroll="{ x: 'calc(640px + 50%)', y: 1000 }"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" :loading="exporting" @click="exportFile()">导出</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'storeCode'">
					{{ $TOOL.tableData('ORG_CATEGORY', record.storeCode, 'code') }}
				</template>
				<template v-if="column.dataIndex === 'status'">
					<a-tag v-if="record.status === 0" color="blue">
						{{ $TOOL.dictTypeData('COUPON_STATUS', record.status + '') }}
					</a-tag>
					<a-tag v-else-if="record.status === 10" color="green">
						{{ $TOOL.dictTypeData('COUPON_STATUS', record.status + '') }}
					</a-tag>
					<a-tag v-else-if="record.status === 20" color="#f50">
						{{ $TOOL.dictTypeData('COUPON_STATUS', record.status + '') }}
					</a-tag>
					<a-tag v-else-if="record.status === 40" color="orange">
						{{ $TOOL.dictTypeData('COUPON_STATUS', record.status + '') }}
					</a-tag>
					<a-tag v-else-if="record.status === 99" color="red">
						{{ $TOOL.dictTypeData('COUPON_STATUS', record.status + '') }}
					</a-tag>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="form.onOpen(record)">编辑</a>
						<a-divider type="vertical" />
						<a @click="form.onOpen(record, true)">详情</a>
						<a-divider type="vertical" />
						<a-dropdown :trigger="['click']">
							<a type="link" @click.prevent>
								更多
								<DownOutlined />
							</a>
							<template #overlay>
								<a-menu>
									<a-menu-item>
										<a-popconfirm title="确定要删除此卡券吗？" @confirm="remove(record)">
											<a-button type="link" danger size="small">删除</a-button>
										</a-popconfirm>
									</a-menu-item>
								</a-menu>
							</template>
						</a-dropdown>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<a-row class="mt-2" :gutter="12">
		<a-col :span="12">
			<a-card :bordered="false" title="营业额">
				<div id="BasicBar1"></div>
			</a-card>
		</a-col>
		<a-col :span="12">
			<a-card :bordered="false" title="客流量">
				<div id="BasicBar2"></div>
			</a-card>
		</a-col>
	</a-row>
	<!--	<a-row class="mt-2">-->
	<!--		<a-col :span="24">-->
	<!--			<a-card :bordered="false" title="销售趋势">-->
	<!--				<div id="area1"></div>-->
	<!--			</a-card>-->
	<!--		</a-col>-->
	<!--	</a-row>-->
</template>

<script setup name="dailySale">
	import { Column, Bar, Area } from '@antv/g2plot'
	import { message } from 'ant-design-vue'
	import biApi from '@/api/bi/biApi'
	import tool from '@/utils/tool'
	import dayjs from 'dayjs'
	let searchFormState = reactive({
		startTimeCreated: dayjs(new Date()).subtract(7, 'day'),
		endTimeCreated: dayjs(new Date()).subtract(1, 'day')
	})
	import { onMounted } from 'vue'

	let barPlot1
	let barPlot2
	let areaPlot1

	onMounted(() => {
		barPlot1 = new Bar('BasicBar1', {
			data: [],
			xField: 'totalAmount',
			yField: 'storeName',
			seriesField: 'storeName',
			legend: {
				position: 'top-left'
			},
			label: {
				// 可手动配置 label 数据标签位置
				position: 'middle' // 'top', 'bottom', 'middle'
			}
		})
		barPlot2 = new Bar('BasicBar2', {
			data: [],
			xField: 'totalCustomers',
			yField: 'storeName',
			seriesField: 'storeName',
			legend: {
				position: 'top-left'
			},
			label: {
				// 可手动配置 label 数据标签位置
				position: 'middle' // 'top', 'bottom', 'middle'
			}
		})

		// areaPlot1 = new Area('area1', {
		// 	data: [],
		// 	xField: 'createTime',
		// 	yField: 'totalAmount',
		// 	seriesField: 'storeName',
		// 	areaStyle: () => {
		// 		return {
		// 			fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
		// 		}
		// 	}
		// })

		barPlot1.render()
		barPlot2.render()
		// areaPlot1.render()
	})

	const table = ref(null)
	const exporting = ref(false)
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: true }
	const columns = [
		{
			title: '销售排名',
			dataIndex: 'rowRank',
			align: 'center',
			width: 50
		},
		{
			title: '门店名称',
			dataIndex: 'storeName',
			width: 160
		},
		{
			title: '销售日期',
			dataIndex: 'createTime',
			align: 'center',
			width: 100
		},
		{
			title: '当期销售',
			children: [
				{
					title: '销售总额',
					dataIndex: 'totalAmount',
					align: 'right',
					width: 110
				},
				{
					title: '客流量',
					dataIndex: 'totalCustomers',
					align: 'right',
					width: 80
				},
				{
					title: '客单价',
					dataIndex: 'totalPrice',
					align: 'right',
					width: 80
				},
				{
					title: '销售数量',
					dataIndex: 'totalItemCount',
					align: 'right',
					width: 100
				},
				{
					title: 'SKU数量',
					dataIndex: 'totalSkuCount',
					align: 'right',
					width: 100
				}
			]
		},
		{
			title: '同比销售',
			children: [
				{
					title: '同比销售总额',
					dataIndex: 'yoyTotalAmount',
					align: 'right',
					width: 110
				},
				{
					title: '同比客流量',
					dataIndex: 'yoyTotalCustomers',
					align: 'right',
					width: 100
				},
				{
					title: '同比客单价',
					dataIndex: 'yoyTotalPrice',
					align: 'right',
					width: 100
				},
				{
					title: '同步销售数量',
					dataIndex: 'yoyTotalItemCount',
					align: 'right',
					width: 110
				},
				{
					title: '同步SKU数量',
					dataIndex: 'yoyTotalSkuCount',
					align: 'right',
					width: 110
				}
			]
		},
		{
			title: '环比销售',
			children: [
				{
					title: '环比销售总额',
					dataIndex: 'momTotalAmount',
					align: 'right',
					width: 110
				},
				{
					title: '环比客流量',
					dataIndex: 'momTotalCustomers',
					align: 'right',
					width: 110
				},
				{
					title: '环比客单价',
					dataIndex: 'momTotalPrice',
					align: 'right',
					width: 110
				},
				{
					title: '环比销售数量',
					dataIndex: 'momTotalItemCount',
					align: 'right',
					width: 110
				},
				{
					title: '环比SKU数量',
					dataIndex: 'momTotalSkuCount',
					align: 'right',
					width: 110
				}
			]
		}
	]

	let selectedRowKeys = ref([])

	// 列表选择配置
	const options = {
		alert: {
			show: false,
			clear: () => {
				selectedRowKeys = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}

	let storeOptions = tool
		.tableList('ORG_CATEGORY')
		.filter((item) => item.category === 'STORE' || item.category === 'COMPANY')
		.map((item) => {
			return {
				value: item['code'],
				label: item['name']
			}
		})

	// 列表数据
	const loadData = (parameter) => {
		const params = Object.assign(parameter, searchFormState)
		if (params.startTimeCreated) {
			params.startTimeCreated = params.startTimeCreated.format('YYYY-MM-DD')
		}
		if (params.endTimeCreated) {
			params.endTimeCreated = params.endTimeCreated.format('YYYY-MM-DD')
		}
		return biApi.pageDailySale(params).then((res) => {
			barPlot1.changeData(res.records)
			barPlot2.changeData(res.records)
			// areaPlot1.changeData(res.records)
			return res
		})
	}

	const exportFile = () => {
		exporting.value = true
		const params = Object.assign({}, searchFormState)
		if (params.startTimeCreated) {
			params.startTimeCreated = params.startTimeCreated.format('YYYY-MM-DD')
		}
		if (params.endTimeCreated) {
			params.endTimeCreated = params.endTimeCreated.format('YYYY-MM-DD')
		}
		params.pageNo = null
		biApi.exportExcel('bi/dailySale/export', '门店日销售' + Date.now(), params).finally((_) => {
			exporting.value = false
		})
	}
</script>

<style lang="less" scoped>
	::v-deep .ant-table .ant-table-fixed-left {
		height: auto !important;
		bottom: 15px !important;
		&::before {
			background-color: #fff;
		}
	}
</style>
